<template>
  <div class="import_history">
    <one-title title="已导入历史记录" @refreshData="refresh"></one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        ref="mesSearch"
        :searchList="tableColConfig"
        :searchResult="searchResult"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          :data="importHistory.list"
          border
          stripe
          v-loading="isLoading"
          style="width: 100%"
          ref="mesTable"
          :max-height="tableMaxHeight"
          @sort-change="_sort"
          @selection-change="handleSelectionChange">
          <mes-col-comp
            :key="column.prop"
            v-for="column in tableColConfig"
            :column="column"></mes-col-comp>
          <el-table-column
            label="操作"
            :resizable="false"
            fixed="right"
            align="center"
            min-width="50"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="jump_item" @click.stop="_down(scope.row)">下载</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="importHistory.pageNo"
        :total="importHistory.count || 0"
        :pageSize="importHistory.pageSize"
      >
      </mes-pagination>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ImportHistory',
  data() {
    return {
      isLoading: false, // 数据加载中
      selectData: [], // 选中的数据
      searchData: {}, // 搜索的字段
      sortData: {}, // 排序的字段
      searchResult: NaN, // 搜索结果数
      tableColConfig: [
        {
          prop: 'fileName',
          label: '上传文件名',
          colConfig: {
            minWidth: 200,
            align: 'left'
          }
        },
        {
          prop: 'uploadDate',
          label: '上传时间',
          searchConfig: {
            type: 'date'
          },
          colConfig: {
            minWidth: 100,
            sortable: 'custom'
          }
        },
        {
          prop: 'uploadUser',
          label: '上传用户',
          colConfig: {
            minWidth: 120
          }
        }
      ] // 表格列配置
    }
  },
  computed: {
    // 导入历史的数据
    importHistory() {
      return this.$store.state.workListReceive.importHistory
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 刷新方法
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.mesTable.clearSort()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 初始化
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: this.importHistory.pageSize || 15
      }
      let postData = {
        method: 'post',
        url: 'a/uploadworkorderexcelhistory/uploadWorkorderExcelHistory/list',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          query: this.searchData,
          sort: this.sortData,
        },
        module: 'workListReceive',
        state: 'importHistory'
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 搜索
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 下载
    _down(row) {
      if (row.uploadHistoryId) {
        this.$downByBlob(row.uploadHistoryId, row.fileName)
      }
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 复选框
    handleSelectionChange(val) {
      this.selectData = val
    },
  }
}
</script>

<style scoped lang="less">
  .import_history {
  }
</style>
